{% extends 'base.html' %}

{% block title %}jobs classic{% endblock %}

{% block head %}
  <!-- <meta http-equiv="refresh" content="60"> -->
  <style>
    #tbody_pending {color: red;}
    table>tbody td:nth-child(1) {word-break: break-all;}
    table>tbody td:nth-child(2) {word-break: break-all;}
    {% if SHOW_JOBS_JOB_COLUMN %}
    table>tbody td:nth-child(3) {word-break: break-all;}
    {% endif %}
    table>tbody td a {word-break: keep-all;}
  </style>

  {% if SCRAPYD_SERVERS_AMOUNT == 1 and (pageview == 1 or pageview % CHECK_LATEST_VERSION_FREQ == 0) %}
  <script type="text/javascript" src="https://my8100.pythonanywhere.com/check_update?scrapydweb={{ SCRAPYDWEB_VERSION }}&n={{ SCRAPYD_SERVERS_AMOUNT }}&v={{ PYTHON_VERSION }}&sc={{ SCRAPY_VERSION }}&sd={{ SCRAPYD_VERSION }}&f={{ FEATURES }}&pv={{ pageview }}"></script>
  <script>setTimeout("checkLatestVersion({{ pageview }}, '{{ SCRAPYDWEB_VERSION }}', '{{ GITHUB_URL }}');", 1000);</script>
  {% else %}
  <script>if(window.localStorage && localStorage.getItem('github') !== null) {localStorage.removeItem('github');}</script>
  {% endif %}
{% endblock %}


{% block body %}
{% if (SCRAPYD_SERVERS_AMOUNT == 1 and pageview == 1) or IS_IE_EDGE %}
<script>(function () {try {checkBrowser();} catch(err) {console.log(err);}})();</script>
{% endif %}

<h2>
  <a class="link" target="_blank" href="{{ url }}">Get the list of jobs of all projects after Scrapyd server started.</a>
  <label title="switch to database view">
    <a class="button normal" href="{{ url_jobs_database }}">Database View</a>
  </label>
  <label title="schedule a spider run">
    <a class="button safe narrow" href="{{ url_schedule }}">+</a>
  </label>
</h2>

<div class="table wrap">
  <h3>Pending ({{ pending_jobs|length }})</h3>
  <table>
    <thead>
      <tr>
        <th>Project</th>
        <th>Spider</th>
        <th>Job</th>
        <th>Action</th>
      </tr>
    </thead>
    <tbody id="tbody_pending">
    {% for job in pending_jobs %}
      <tr>
        <td>{{ job['project'] }}</td>
        <td>{{ job['spider'] }}</td>
        <td>{{ job['job'] }}</td>
        <td id="pending_cancel_{{ loop.index }}">
          {% if SCRAPYD_SERVERS_AMOUNT > 1 %}
          <a class="state multinode" href="{{ job['url_multinode_stop'] }}">
            {{ g.multinode|safe }}
          </a>
          {% endif %}
          <a class="state warning" href="javascript:;" onclick="jobsXHR('{{ job['url_stop'] }}', forcestop=false, id='pending_cancel_{{ loop.index }}');">Cancel</a>
        </td>
      </tr>
    {% endfor %}
    </tbody>
  </table>
</div>

<div class="table wrap">
  <h3>Running ({{ running_jobs|length }}) <strong id="logparser_last_update" style="color: #67c23a;"></strong></h3>
  <table>
    <thead>
      <tr>
        <th>Project</th>
        <th>Spider</th>
        {% if SHOW_JOBS_JOB_COLUMN %}
        <th>Job</th>
        {% endif %}

        <th>PID</th>
        <th>Start</th>
        <th>Runtime</th>
        <th>Pages</th>
        <th>Items</th>
        <th>Stats</th>
        <th>Log</th>
        {% if SHOW_SCRAPYD_ITEMS and running_jobs and (running_jobs[0]['url_items'] or running_jobs[-1]['url_items']) %}
        <th>Items</th>
        {% endif %}

        <th>Action</th>
        <th>Forcestop</th>
      </tr>
    </thead>
    <tbody>
    {% for job in running_jobs %}
      <tr>
        <td>{{ job['project'] }}</td>
        <td>{{ job['spider'] }}</td>
        {% if SHOW_JOBS_JOB_COLUMN %}
        <td>{{ job['job'] }}</td>
        {% endif %}

        <td>{{ job['pid'] }}</td>
        <td>{{ job['start'] }}</td>
        <td>{{ job['runtime'] }}</td>
        <td id="running{{ loop.index }}pages">N/A</td>
        <td id="running{{ loop.index }}items">N/A</td>
        <td>
          {% if SCRAPYD_SERVERS_AMOUNT > 1 %}
          <a class="state multinode" href="{{ job['url_clusterreports'] }}">
            {{ g.multinode|safe }}
          </a>
          {% endif %}
          <a class="state normal" target="_blank" href="{{ job['url_stats'] }}">Stats</a>
        </td>
        <td><a class="state normal" target="_blank" href="{{ job['url_utf8'] }}">Log</a></td>
        {% if SHOW_SCRAPYD_ITEMS and job['url_items'] %}
        <td><a class="state normal" target="_blank" href="{{ job['url_items'] }}">Items</a></td>
        {% endif %}
        <td id="running_stop_{{ loop.index }}">
          {% if SCRAPYD_SERVERS_AMOUNT > 1 %}
          <a class="state multinode" href="{{ job['url_multinode_stop'] }}">
            {{ g.multinode|safe }}
          </a>
          {% endif %}
          <a class="state warning" href="javascript:;" onclick="jobsXHR('{{ job['url_stop'] }}', forcestop=false, id='running_stop_{{ loop.index }}');">Stop</a>
        </td>
        <td id="running_forcestop_{{ loop.index }}">
          <a class="state danger" href="javascript:;" onclick="jobsXHR('{{ job['url_forcestop'] }}', forcestop=true, id='running_forcestop_{{ loop.index }}');">Forcestop</a>
        </td>
      </tr>
    {% endfor %}
    </tbody>
  </table>
</div>


<div class="table wrap">
  <h3>Finished ({{ finished_jobs|length }}) <strong style="color: green;">ORDER BY finish DESC</strong></h3>
  <table>
    <thead>
      <tr>
        <th>Project</th>
        <th>Spider</th>
        {% if SHOW_JOBS_JOB_COLUMN %}
        <th>Job</th>
        {% endif %}

        <th>Start</th>
        <th>Runtime</th>
        <th>Finish</th>
        <th>Pages</th>
        <th>Items</th>
        <th>Stats</th>
        <th>Log</th>
        {% if SHOW_SCRAPYD_ITEMS and finished_jobs and (finished_jobs[0]['url_items'] or finished_jobs[-1]['url_items']) %}
        <th>Items</th>
        {% endif %}

        <th>Action</th>
      </tr>
    </thead>
    <tbody>
    {% for job in finished_jobs %}
      <tr>
        <td>{{ job['project'] }}</td>
        <td>{{ job['spider'] }}</td>
        {% if SHOW_JOBS_JOB_COLUMN %}
        <td>{{ job['job'] }}</td>
        {% endif %}

        <td>{{ job['start'] }}</td>
        <td>{{ job['runtime'] }}</td>
        <td>{{ job['finish'] }}</td>
        <td id="finished{{ loop.index }}pages">N/A</td>
        <td id="finished{{ loop.index }}items">N/A</td>
        <td>
          {% if SCRAPYD_SERVERS_AMOUNT > 1 %}
          <a class="state multinode" href="{{ job['url_clusterreports'] }}">
            {{ g.multinode|safe }}
          </a>
          {% endif %}
          <a class="state normal" target="_blank" href="{{ job['url_stats'] }}">Stats</a>
        </td>
        <td><a class="state normal" target="_blank" href="{{ job['url_utf8'] }}">Log</a></td>
        {% if SHOW_SCRAPYD_ITEMS and job['url_items'] %}
        <td><a class="state normal" target="_blank" href="{{ job['url_items'] }}">Items</a></td>
        {% endif %}
        <td>
          {% if SCRAPYD_SERVERS_AMOUNT > 1 %}
          <a class="state multinode" href="{{ job['url_multinode_run'] }}">
            {{ g.multinode|safe }}
          </a>
          {% endif %}
          <a class="state safe" href="{{ job['url_schedule'] }}">Start</a>
        </td>
      </tr>
    {% endfor %}
    </tbody>
  </table>
</div>


<script>
{% if JOBS_RELOAD_INTERVAL > 0 %}
setTimeout("if(loading == false){window.location.reload(true);}else{console.log('loading: ' + loading);}", {{ JOBS_RELOAD_INTERVAL * 1000 }});
{% endif %}

// http://pietschsoft.com/post/2015/09/05/JavaScript-Basics-How-to-create-a-Dictionary-with-KeyValue-pairs
var running_jobs = {
{% for job in running_jobs %}
  'running{{ loop.index }}': {
    'project': "{{ job['project'] }}",
    'spider': "{{ job['spider'] }}",
    'job': "{{ job['job'] }}"
  },
{% endfor %}
};

var finished_jobs = {
{% for job in finished_jobs %}
  'finished{{ loop.index }}': {
    'project': "{{ job['project'] }}",
    'spider': "{{ job['spider'] }}",
    'job': "{{ job['job'] }}"
  },
{% endfor %}
};

window.onload = function() {
  var req = new XMLHttpRequest();
  req.onreadystatechange = function() {
    if (this.readyState == 4) {
      if (this.status == 200) {
        var obj = JSON.parse(this.responseText);
        if (obj.status == 'ok') {
          for (var index in [running_jobs, finished_jobs]) {
            var jobs = [running_jobs, finished_jobs][index];
            for (var key in jobs) {
              try {
                var job = jobs[key];  // dict object
                for (var idx in ['pages', 'items']) {
                  var kind = ['pages', 'items'][idx];
                  var count = obj.datas[job.project][job.spider][job.job][kind];
                  var element = my$('#' + key + kind);
                  if (count !== null) {
                    element.style.fontWeight = 'bold';
                    element.style.color = count == 0 ? 'red' : '#67c23a';
                    element.innerHTML = count;
                  }
                  console.log(kind + " of jobid " + job.job + ": " + count);
                }
              } catch(err) {
                // console.log(err);
                console.log(kind + " of jobid " + job.job + " not found" );
              }
            }
          }

          my$('#logparser_stats').style.display = 'block';  // flash in base.html
          my$('#logparser_stats').innerText = "LogParser v" + obj.logparser_version + ", last updated at " + obj.last_update_time + ", {{ url_liststats_source }}";
          my$('#logparser_last_update').innerText = "by LogParser: " + Math.ceil(Date.now() / 1000 - obj.last_update_timestamp) + " secs ago";
          setInterval(function() {
            var now_timestamp = Date.now() / 1000;
            var seconds = Math.ceil(Date.now() / 1000 - obj.last_update_timestamp);
            my$('#logparser_last_update').innerHTML = "by LogParser: " + "<span style='color: red;'>" + seconds + "</span> secs ago";
          }, 1000);

          // Update Jobs database
          var r = new XMLHttpRequest();
          r.open('post', '{{ url_liststats }}'.replace('/api/liststats', '/jobs'), Async = true);
          r.send();
        } else {
          // '/api/stats/' would return "status": "error", "status_code": 404,
          console.log(obj.status);
          console.log(obj.logparser_version);
          my$('#logparser_last_update').style.color = 'red';
          my$('#logparser_last_update').innerText = obj.tip;
        }
      } else {
        console.log(this.status);
      }
    }
  };
  req.open('post', '{{ url_liststats }}', Async=true);
  req.send();
}
</script>
{% endblock %}
